<template>
    <div>
        <user-heads-info></user-heads-info>
        <div class="bottom-box">
            <div class="main-box">
                <p class="recharge-balance">充值成功后余额</p>
                <p class="balance">6.00</p>
                <p class="choose-type">选择支付方式</p>
                <div class="pay-type active">
                    <img src="../assets/icon_ailipay.png" alt="" class="pay-type-img">
                    <span>使用支付宝支付</span>
                    <img src="../assets/check_active.png" alt="" class="check">
                </div>
                <div class="pay-type">
                    <img src="../assets/icon_wechatpay.png" alt="" class="pay-type-img">
                    <span>使用微信支付</span>
                    <img src="../assets/check_active.png" alt="" class="check">
                </div>
            </div>
            <span class="goPay">去支付</span>
        </div>
    </div>
</template>
<script>
import userHeadsInfo from './common/UserHeadsInfo'
export default {
   name:'userFastRecharge',
    components:{
        userHeadsInfo
    }
}
</script>
<style scoped>
.bottom-box{
    width: 96%;
    position: absolute;
    bottom: 7px;
    left: 2%;
    margin: 0 auto;
}
.goPay{
    width: 100%;
    height: 44px;
    background-color: #EDECE8;
    display: block;
    margin: 0 auto;
    font-size: 15px;
    color: #545D61;
    letter-spacing: 5px;
    text-align: center;
    line-height: 44px;
}
.main-box{
    display: flex;
    width: 100%;
    height: 290px;
    background: #EDECE8;
    margin-bottom: 8px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.recharge-balance{
    margin-top: 30px;
    line-height: 20px;
    font-size: 15px;
    color: #545D61;
    letter-spacing: 0;
}
.balance{
    font-size: 24px;
    line-height: 42px;
    color: #545D61;
    letter-spacing: 0;
}
.choose-type{
    line-height: 20px;
    margin-top: 10px;
    font-size: 18px;
    color: #545D61;
    letter-spacing: 0;
    margin-bottom: 25px;
}
.pay-type{
    width: 330px;
    height: 44px;
    background: #E2E1DC;
    border-radius: 5px;
    line-height: 44px;
    margin-bottom: 25px;
}
.pay-type-img{
    width: 32px;
    height: 32px;
    float: left;
    padding: 6px;
}
.pay-type span{
    display: block;
    height: 44px;
    line-height: 44px;
    font-size: 15px;
    color: #545D61;
    letter-spacing: 0;
    float: left;
    margin-left: 6px;
}
.pay-type.active{
    box-shadow: 0 12px 20px 0 rgba(0,0,0,0.10);
    background-color: #ffffff;
}
.pay-type.active .check{
    display: block;
}
.check{
    width: 20px;
    height: 20px;
    float: right;
    padding: 12px;
    display: none;
}
</style>
